<template>
  <div>
    <div>
      <ul>
        <li v-for="(itme, index) in obj" :key="index">{{ itme }}</li>
      </ul>
      <button @click="onAdd">添加</button>
      <button @click="onDelete">删除</button>
    </div>

    <div>
      <h3>如何解决无法监听数组及对象?</h3>
      <ul>
        <li v-for="(itme, index) in list" :key="index">{{ itme }}</li>
      </ul>
      <button @click="onUpdate">更改数组</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "SetDeleteDemo",
  data() {
    return {
      obj: {
        a: "a",
        b: "b"
      },
      list: ['11', '22', '33']
    };
  },
  watch: {
    list: {
      handler(newValue, oldValue) {
        console.log('newValue=', newValue);
        console.log('oldValue=', oldValue);
      },
      deep: true
    }
  },
  methods: {
    onAdd: function() {
      // this.obj.c = 'c';
      // 新的属性被添加到obj中，但视图并未刷新，因为data中没有obj.c
      console.log(this.obj);
      // 解决方法：使用this.$set添加属性, $set()方法相当于手动的去把obj.c处理成一个响应式的属性，此时视图也会跟着改变了
      this.$set(this.obj, "c", "c");
    },
    onDelete: function() {
      // 从data中删除属性
      this.$delete(this.obj, "a");
    },
    // 更改数组
    onUpdate() {
      // 通过索引更改数组值后，dom上的值并不会被改变；
      this.list[0] = '小明';
      console.log(this.list);
    }
  }
};
</script>

<style scoped></style>
